<!-- 管理员:课程考核管理:题库和在线考试管理:试卷库管理:试卷详情 -->
<template>
  <div style="width:100% !important;">
    <div>
      <el-table :data="tableData"
                border
                class="xpaas-table-class"
                row-class-name="xpaas-row-class"
                cell-class-name="xpaas-cell-class"
                header-row-class-name="xpaas-header-row-class"
                header-cell-class-name="xpaas-header-cell-class">
        <el-table-column type="selection"
                         align="center"
                         label="选择"
                         width="300" />
        <el-table-column prop="clazzName"
                         label="试卷"
                         align="center">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="2">
                <div>&nbsp;</div>
              </el-col>
              <el-col :span="20">
                <div class="examination-title-container">
                  <!-- <ind :class="scope.row.status">{{ scope.row.statusName }}</ind> -->
                  <span class="examination-title">
                    {{ scope.row.sttg }}
                  </span>
                </div>
                <div class="examination-desc-container">
                  <ind>&nbsp;</ind>
                  <span>
                    {{ scope.row.stzj }} |
                    {{ scope.row.stzj }} |
                    总分 {{ scope.row.khdfs }} 分 |
                  </span>
                </div>
              </el-col>
              <el-col :span="2">
                <div></div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="clazzName"
                         label="操作"
                         align="center"
                         width="330">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="12">
                <el-button size="mini"
                           type="danger"
                           @click="onBtnReviewClickHandler"
                           icon="el-icon-delete">删 除</el-button>
              </el-col>
              <el-col :span="12">
                <el-button @click="onModifyClassClickHandler()"
                           size="mini"
                           type="success"
                           icon="el-icon-setting">设 置</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="search-result-desc-panel">
      <span>共找到 {{ searchResultPagin.totalCount }} 条记录，当前显示 {{
          (searchResultPagin.totalCount > 0) ? ((searchResultPagin.currentPage - 1) * searchResultPagin.perpageCount + 1) : (0)
          }} - {{
          (searchResultPagin.totalCount > 0) ? (searchResultPagin.currentPage * searchResultPagin.perpageCount) : (0)
          }} 条记录。</span>
    </div> -->
    <!-- <div class="search-result-pagin-panel">
      <el-pagination @size-change="onPerpageSizeChangeHandler"
                     @current-change="onCurrentPageNoChangeHandler"
                     :current-page="searchResultPagin.currentPage"
                     :page-sizes="[10, 20, 30, 50]"
                     :page-size="searchResultPagin.perpageCount"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="searchResultPagin.totalCount">
      </el-pagination>
    </div> -->
  </div>
</template>
<script>
import { getselectListPager } from '@/api/examinations/sjkgetlist.js'
export default {
  data() {
    return {
      sjid: '',
      tableData: [
        {
          status: 'running',
          statusName: '考试中',
          title: '清问一年有多少个季节',
          capter: '第一章 第2节',
          examType: '固定试题考试',
          totalScore: 100,
          questionCount: 66,
          limitTime: 60,
          forPeople: '所有人可考',
        },
        {
          status: 'ready',
          statusName: '待考试',
          title: '清问一年有多少个季节',
          capter: '第一章 第2节',
          examType: '固定试题考试',
          totalScore: 100,
          questionCount: 66,
          limitTime: 60,
          forPeople: '所有人可考',
        },
      ],
      searchResultPagin: {
        totalCount: 1000,
        perpageCount: 10,
        currentPage: 3,
        currentStart: 31,
        currentEnd: 40,
      },
    }
  },
  created() {
    this.sjid = this.$route.params.id
    this.getselectListPager()
  },
  methods: {
    getselectListPager() {
      getselectListPager(this.sjid).then((res) => {
        this.tableData = res.data.data
      })
    },
    onPerpageSizeChangeHandler: function (pPageSize) {
      this.searchResultPagin.perpageCount = pPageSize
    },
    onCurrentPageNoChangeHandler: function (pPageNo) {
      this.searchResultPagin.currentPage = pPageNo
    },
    onModifyClassClickHandler() {
      this.$router.push({
        name: '新增试卷',
        params: { id: 1 },
      })
    },
  },
}
</script>
<style lang="less" scoped>
@import '../../courseAssessmentScoped.less';
@import '../../exportBtn.less';

.examination-desc-container {
  text-align: left;
  ind {
    display: inline-block;
    text-align: center;
    width: 80px;
  }
  span {
    font-size: 14px;
    font-weight: bold;
    font-family: @fontFamily;
    color: #919191;
  }
}
.examination-title-container {
  text-align: left;
  ind {
    display: inline-block;
    text-align: center;
    width: 80px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    font-family: @fontFamily;
  }
  .ready {
    background-color: #dfffed;
    color: #1ebe7e;
  }
  .running {
    background-color: #ffeff0;
    color: #c66e6a;
  }
  .examination-title {
    font-size: 16px;
    font-weight: bold;
    font-family: @fontFamily;
    color: #004ca7;
  }
}
.search-result-pagin-panel {
  text-align: right;
}
.search-result-desc-panel {
  font-size: 14px;
  font-weidth: normal;
  font-family: @fontFamily;
  color: #004ca7;
  margin: 15px 0 0 0;
}
</style>